<template>
  <div class="tw-toolmenubar">
    <div class="logo">&nbsp;</div>
    <el-tabs
    v-model="editableTabsValue"
    type="card"
    closable
    class="demo-tabs"
    @tab-remove="removeTab"
    >

    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
        <!-- {{ item.content }} -->
    </el-tab-pane>
    </el-tabs>

    <div class="tw-header-tools">
      <div class="xdefmenu" v-for="(menus, idx) in defaultMenus" :key="idx">
        <!-- <el-tooltip
          class="box-item"
          effect="light"
          :content="menus.name"
          placement="top-start"
        > -->
          <a @click="handleChange(menus.opera)">
            <SvgIcon :name="menus.icon" class="x18" />
          </a>
        <!-- </el-tooltip> -->
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'element-plus'
import SvgIcon from '../SvgIcon/index.vue'
// const { ipcRenderer } = require("electron");

const defaultMenus = [{
  name: '最小化',
  icon: 'mini',
  opera: 'minimize'
}, {
  name: '最大化',
  icon: 'max',
  opera: 'maximize'
}, {
  name: '关闭',
  icon: 'close',
  opera: 'close'
}]
let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])
const handleChange = (opera: any) => {
  console.log(opera)
  // ipcRenderer.invoke(opera)
} 
const handleTabsEdit = (
    targetName: TabPaneName | undefined,
    action: 'remove' | 'add'
  ) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
       if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
const removeTab = (targetName: string) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>

<style lang="scss" scoped>
.tw-toolmenubar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
  height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
  background: #d3e3fd;

  .logo {
    display: inline-block;
    width: 30px;
    height: 32px;
    background: #fff;
    border-radius: 8px 8px 0 0;
  }
}
:deep(.el-tabs) {
  width: calc(100% - 120px);
  --el-tabs-header-height: 32px;
}
:deep(.el-tabs__new-tab),
:deep(.el-tabs__nav) {
  -webkit-app-region: no-drag;
}
:deep(.el-tabs__content) {
  display: none;
}
:deep(.el-tabs__header) {
  margin: 0;
}
:deep(.el-tabs__nav-scroll) {
  background: #d3e3fd;
}
:deep(.el-tabs__item) {
  background: #d3e3fd;
  // 
  &.is-active {
    background: #fff;
    border-radius: 8px 8px 0 0;
  }
}
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: none;
}

.tw-header-tools {
  -webkit-app-region: no-drag;
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
  width: 120px;

  .xdefmenu {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>